import React, {useEffect, useMemo, useState} from "react";
import style from "./index.module.scss"
import {Input, Segmented} from "antd";
import Icon from "@ant-design/icons";
import * as icons from "@ant-design/icons";
import * as customIcons from "@/assets/icon";


const SelectIcon = React.forwardRef((props: any, ref: any) => {
    const {setValue, setHovered} = props
    const [useIcons, setUseIcons] = useState([])
    const [viewIcons, setViewIcons] = useState([])


    const selectIcons = useMemo(() => {
        // 三个分类
        const outlinedIcons: any = []
        const filledIcons: any = []
        const twoToneIcons: any = []
        const _customIcons: any = []

        const iconList = Object.keys(icons).filter(
            (item) => {
                return typeof icons[item] === "object" && item !== "default"
            }
        );

        iconList.forEach(key => {
                const icon = icons[key]
                if (key.indexOf("Outlined") !== -1) {
                    outlinedIcons.push(icon)
                } else if (key.indexOf("Filled") !== -1) {
                    filledIcons.push(icon)
                } else if (key.indexOf("TwoTone") !== -1) {
                    twoToneIcons.push(icon)
                }
            }
        )

        for (let customIconsKey in customIcons) {
            let customIcon = customIcons[customIconsKey]
            customIcon.displayName = customIconsKey
            _customIcons.push(customIcon)
        }
        console.log("_customIcons", _customIcons)
        console.log("customIcons", customIcons)
        return {
            "outlinedIcons": outlinedIcons,
            "filledIcons": filledIcons,
            "twoToneIcons": twoToneIcons,
            "customIcons": _customIcons
        }
    }, [])

    useEffect(() => {
        setViewIcons(selectIcons.outlinedIcons as any)
    }, [selectIcons])

    const [segmentedValue, setSegmentedValue] = useState("outlined")
    const segmentedOptions = [
        {
            value: "outlined",
            label: '线框风格'
        }, {
            value: "filled",
            label: '实底风格'
        },
        {
            value: "twoTone",
            label: '双色风格'
        }, {
            value: "custom",
            label: '自定义'
        }
    ]

    const reset = () => {
        console.log("reset")
    }

    React.useImperativeHandle(ref, () => ({
        reset: reset
    }))
    const handleChange = (e: any) => {
        const text = e.target.value
        setUseIcons(viewIcons.filter(item => {
            return item.displayName.indexOf(text) !== -1
        }))
    }
    useEffect(() => {
        setUseIcons(viewIcons)
    }, [viewIcons])

    const handleIconClick = (displayName: string) => {
        console.log(displayName); // 这里可以处理 displayName，比如显示在控制台
        setValue(displayName)
        // 关闭弹窗
        setHovered(false)
    };

    return (
        <div className={style.selectIcon}>
            <Input placeholder={"请输入图标名称"} onChange={(e) => handleChange(e)}></Input>
            <div className={style.iconContent}>
                <Segmented<string>
                    value={segmentedValue}
                    options={segmentedOptions}
                    onChange={(value) => {
                        setSegmentedValue(value)
                        console.log("selectIcons", selectIcons)
                        switch (value) {
                            case "outlined":
                                setViewIcons(selectIcons.outlinedIcons as any | [])
                                break
                            case "filled":
                                setViewIcons(selectIcons.filledIcons as any | [])
                                break
                            case "twoTone":
                                setViewIcons(selectIcons.twoToneIcons as any | [])
                                break
                            case "custom":
                                setViewIcons(selectIcons.customIcons as any | [])
                                break
                            default:
                                setViewIcons([])
                                break
                        }
                    }}
                />
                <div className={style.iconList}>
                    {
                        (useIcons && useIcons.length > 0) ? useIcons.map((item: any, index: number) => {
                            return <div className={style.iconItem} key={index}
                                        onClick={() => handleIconClick(item.displayName)}>
                                <Icon className={style.icon} component={item} style={{fontSize: "36px"}}/>
                                <span id="icon_span" style={{fontSize: "12px"}}>{item.displayName}</span>
                            </div>
                        }) : <div>暂无图标</div>
                    }
                </div>
            </div>
        </div>
    );
})

export default SelectIcon;
